<template>
  <div>
    <a-modal
      title="选择学员"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      width="750px"
    >
      <a-spin :spinning="confirmLoading">
        <a-input-search
          v-model="name"
          style="width:200px;margin-bottom:20px;"
          placeholder="学员姓名"
          clearable
        ></a-input-search>
        <a-select
          v-model="class_id"
          style="width:200px;margin-left:15px;"
          placeholder="请选择所在班级"
          allowClear
        >
          <a-select-option
            v-for="(item,index) in Isclass"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
        <a-table
          :columns="columns"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="user_management_table"
          style="margin-bottom:-20px"
          rowKey='id'
          :pagination="paginationOpt"
          :dataSource="tableData"
          :scroll="{  y: 340 }"
        ></a-table>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { studentList } from '@/api/student'
import { classList } from '@/api/class'
const columns = [
  {
    title: '学员姓名',
    dataIndex: 'name',
    ellipsis: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '手机号',
    ellipsis: true,
    dataIndex: 'main_phone',
    key: 'main_phone',
  },
  // {
  //   title: '年级',
  //   ellipsis: true,
  //   dataIndex: 'grade_name',
  //   key: 'grade_name',
  // },
]
export default {
  created() {
    classList({ pageSize: 99999, school_id: this.$store.state.user.school })
      .then((res) => {
        //搜索班级--keywords，名字字段
        this.Isclass = res.data
        
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取班级数据失败，请刷新页面或稍后再试')
      })
  },
  name: 'studentModel',
  props: {
    studentArr: Array,
  },
  data() {
    return {
      selectedRowKeys: [], //多选
      visible: false,
      columns,
      tableData: [],
      confirmLoading: false,
      name: '', // 查询
      Isclass: [],
      class_id: undefined,
      pageSize:15,
      paginationOpt:{
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 15,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["15", "100", "500", "1000"],
        total: 0,
        showTotal: (total) => `共 ${total} 条`,
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          this.reload(); //显示列表的接口名称
        },
        onChange: (current, size) => {
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          this.reload();
        },
      }
    }
  },
  methods: {
    handleOk() {
      let arr = []
      if (this.selectedRowKeys !== '') {
        this.selectedRowKeys.forEach((val) => {
          this.tableData.forEach((item, index) => {
            if (item.id == val) {
              arr.push({
                id: item.id,
                name: item.name,
              })
            }
          })
        })
      }
      this.$emit('reload', arr)
      this.visible = false
      this.class_id = undefined
    },
    showModel() {
      this.reload()
      this.visible = true
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
    },
    onSelectChange(selectedRowKeys, index) {
      this.selectedRowKeys = selectedRowKeys
      console.log(selectedRowKeys)
    },
    reload() {
      this.confirmLoading = true
      studentList({
        school_id: this.$store.state.user.school,
        keywords: this.name,
        type:1,
        class_id: this.class_id,
        pageSize: this.paginationOpt.defaultPageSize,
        pageNo:this.paginationOpt.defaultCurrent
      })
        .then((res) => {
          this.tableData = res.data
          this.paginationOpt.total = res.meta.pagination.total
          if (this.studentArr.length > 0) {
            let array = []
            this.tableData.forEach((val, index) => {
              this.studentArr.forEach((item) => {
                if (val.id == item) {
                  array.push(index)
                }
              })
            })
            this.selectedRowKeys = array
          } else {
            this.selectedRowKeys = []
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取学员列表失败，请稍后重试')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
  },
  watch: {
    name(val) {
        this.reload()
    },
    class_id(val) {
      this.reload()
    },
  },
}
</script>

<style lang="less" scoped>
</style>